<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div class="common-layout">
    <HeadContent title="审批休假"></HeadContent>
    <TagComtent></TagComtent>
    <el-container>
      <el-main>
        <el-space wrap :size="sizeSpace">

          <el-card style="width: 150vh" shadow="hover">
            <el-calendar ref="calendar">
              <template #header="{ date }">
                <span>Custom header content</span>
                <span>{{ date }}</span>
                <el-button-group>
                  <el-button size="small" @click="selectDate('prev-year')">
                    上一年
                  </el-button>
                  <el-button size="small" @click="selectDate('prev-month')">
                    上个月
                  </el-button>
                  <el-button size="small" @click="selectDate('today')">今天</el-button>
                  <el-button size="small" @click="selectDate('next-month')">
                    下个月
                  </el-button>
                  <el-button size="small" @click="selectDate('next-year')">
                    下一年
                  </el-button>
                </el-button-group>
              </template>
            </el-calendar>
          </el-card>

        </el-space>
      </el-main>
    </el-container>
  </div>
</template>
<script setup lang="ts">
import { ref,  } from 'vue'

import HeadContent from '@/components/HeadContent.vue'
// const flag = ref<boolean>(true)
import TagComtent from '@/components/TagComtent.vue'
import type { CalendarDateType, CalendarInstance } from 'element-plus'




const calendar = ref<CalendarInstance>()
const selectDate = (val: CalendarDateType) => {
  if (!calendar.value) return
  calendar.value.selectDate(val)
}

const sizeSpace = ref<number>(20)
</script>
<style scoped>
.demo-form-inline .el-input {
  --el-input-width: 200px;
}

.demo-form-inline .el-select {
  --el-select-width: 200px;
}

.CaozuoDiv {
  margin-left: 20px;
}
.el-card {
  overflow: hidden; /* 隐藏水平滚动条 */
}
</style>
